<script setup>
import { ref, onMounted, watch, computed, nextTick, onUnmounted, onBeforeMount } from 'vue'
import { compreObj, getDeviceType } from '@/plugins/util.js'
import { setUserExtInfoApi } from './plugins/http/api/user'
import { useMenu } from '@/composition/useMenu';
// import router from '@/plugins/router';
import { useRouter } from 'vue-router'
import Menu from "@/views/Menu.vue";
import { useUser } from '@/composition/useUser'

const { user, setBg, showBg } = useUser();


const sleep = async (delay) => new Promise((resolve) => setTimeout(resolve, delay))


onMounted(() => {
  setBg()
})



// onUnmounted(() => {
//   if (bgInterval) {
//     clearInterval(bgInterval)
//   }
// })


// nextTick(() => {
//   showBg.value = true
// })

const onBeforeEnter = () => {

}

const onAfterLeave = () => {
}

</script>

<template>
  <!-- object-cover duration-[2000ms] -->
  <!-- <div
    class="bgbox transition duration-1000 w-full h-full fixed left-0 right-0 top-0 bottom-0 bg-cover bg-center bg-no-repeat">
  </div> -->

  <!-- style="background-image: url('https://cn.bing.com/th?id=OHR.GoldenEnchantments_ZH-CN9686531344_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp')" -->
  <Transition enter-active-class="animate__animated animate__pulse"
    leave-active-class="animate__animated animate__fadeOut" @before-enter="onBeforeEnter" @after-leave="onAfterLeave">
    <div v-show="showBg"
      class="bgbox transition-all duration-1000 w-full h-full fixed left-0 right-0 top-0 bottom-0 bg-cover bg-center bg-no-repeat">
    </div>
  </Transition>

  <!-- <img @load="bgLoaded" class="bgbox hidden transition duration-1000 w-full h-full fixed left-0 right-0 top-0 bottom-0" id="imgBg" src="https://cn.bing.com/th?id=OHR.GenoeseTower_ZH-CN0086623003_1080x1920.jpg&rf=LaDigue_1080x1920.jpg&pid=hp"/> -->

  <!-- animated pulse -->
  <div class="flex antialiased font-sans transition" id="appvue">
<!--    <Menu></Menu>-->
    <router-view class="content"></router-view>
  </div>
</template>

<style scoped>
#bgbox {
  /* background-image: url("https://api.btstu.cn/sjbz/zsy.php"); */
  transition: opacity 1s, transform 0.25s, filter 0.25s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
}

.bgbox {
  z-index: -999;
  /* width: 100vw; */
  /* height: 100vh; */
  /* background-color: cornsilk; */
  /* background-image: url("http://192.168.168.1:5000/randomFile"); */
  /* transition: opacity 1s, transform 0.25s, filter 0.25s; */
  /* -webkit-backface-visibility: hidden; */
  /* backface-visibility: hidden; */
  /* background-repeat: no-repeat; */
  /* background-position: 50%; */
  /* background-size: cover; */
}
</style>

<!-- <style>
body {
  /* padding-left: calc(100vw -100%); */
  overflow-y: scroll;
}
</style> -->